/*
    http://www.fontspace.com/538fonts/dressedless
    https://everythingfonts.com/ttf-to-svg
    */
@font-face {
  font-family: 'Dressedless Three';
  src: url('resources/fonts/Dressedless_Three.ttf') format("truetype"), url('resources/fonts/Dressedless_Three.svg') format("svg");
  /* Legacy iOS */
}
/*https://github.com/tobiasahlin/SpinKit*/
/* spinner */
.spinner {
  -webkit-animation: sk-rotateplane 1.2s infinite cubic-bezier(0.4, 0, 0.2, 1);
  animation: sk-rotateplane 1.2s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

@-webkit-keyframes sk-rotateplane {
  0% {
    -webkit-transform: perspective(120px);
  }

  50% {
    -webkit-transform: perspective(120px) rotateY(180deg);
  }

  100% {
    -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg);
  }
}


@keyframes sk-rotateplane {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }

  50% {
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
  }

  100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}
/*end spinner*/
.logo {
  margin: 0 auto;
  width: 3rem;
  height: 3rem;
  img {
    display: inherit;
    width: 100%;
    height: 100%;
    border-radius: 20%;
  }
}
.nav-bar{
  position: absolute;
  top: 0.15rem;;
  right: 5%;
  z-index: 10;
  display: inline-block;
  transition: all 1s;
  >*{
    float: left;
    display: inline-block;
    margin-right: .45rem;
  }
  &:last-child{
    margin-right: 0;
  }
  i{
    color: #70B7FD;
    &:hover,&:active{
      color: #59AAF9;
    }
  }
  $anim-delay: 150ms;
  $anim-duration: 500ms;
  @for $i from 1 through 5 {
    >*:nth-child(#{$i}) {
      animation-duration: $anim-duration;
      animation-delay: 500 + $anim-delay*($i - 1);
    }
  }
}
@media (max-width: 34em) {
  .nav-bar{
    right: 1%;
  }
}
@media (min-width: 100em) {
  .nav-bar{
    right: 15%;
  }
}
